<template>
  <div class="field-wrapper form-item-render" >
    <el-form-item
      v-if="!!field.formItemFlag && (!field.options.hidden || (designState === true))"
      :label="label"
      :prop="getPropName()"
      :rules="rules"
      :label-width="labelWidth + 'px'"
      :title="field.options.labelTooltip"
      :class="[ labelAlign, customClass, field.options.required ? 'required' : '' ]"
    >
      <template #label>
        <span v-if="!!field.options.labelIconClass" class="custom-label">
          <template v-if="field.options.labelIconPosition === 'front'">
            <template v-if="!!field.options.labelTooltip">
              <el-tooltip :content="field.options.labelTooltip" effect="light">
                <VfIcon :name="field.options.labelIconClass" />
              </el-tooltip>{{label}}
            </template>
            <template v-else>
              <<VfIcon :name="field.options.labelIconClass" />{{label}}
            </template>
          </template>
          <template v-else-if="field.options.labelIconPosition === 'rear'">
            <template v-if="!!field.options.labelTooltip">
              <span>{{label}}</span>
              <el-tooltip :content="field.options.labelTooltip" effect="light">
                <VfIcon :name="field.options.labelIconClass" />
              </el-tooltip>
            </template>
            <template v-else>
              {{label}}<VfIcon :name="field.options.labelIconClass" />
            </template>
          </template>
        </span>
      </template>
      <slot></slot>
    </el-form-item>
  </div>
</template>

<script setup name="FormItemRender">
import { inject, computed } from 'vue'

const props = defineProps({
  rules: { type: Array },
  field: { type: Object },
  designer: { type: Object },
  parentList: { type: Array },
  designState: { type: Boolean, default: false },
  parentWidget: { type: Object },
  indexOfParentList: { type: Number },
})

// 表单配置
const getFormConfig = inject('getFormConfig')
const formConfig = computed(() => {
  return getFormConfig()
})

// ----- 表单项
const label = computed(() => {
  const { options } = props.field
  return !!options.labelHidden ? '' : options.label
})
const labelAlign = computed(() => {
  const { options } = props.field
  if (!!options.labelAlign) { return options.labelAlign }
  if (!!props.designer) {
    return props.designer.formConfig.labelAlign || 'label-left-align'
  } else {
    return formConfig.value.labelAlign || 'label-left-align'
  }
})
const labelWidth = computed(() => {
  const { options } = props.field
  if (!!options.labelHidden) { return 0 }
  if (!!options.labelWidth) { return options.labelWidth }
  if (!!props.designer) {
    return props.designer.formConfig.labelWidth
  } else {
    return formConfig.value.labelWidth
  }
})
const customClass = computed(() => {
  const { options } = props.field
  return !!options.customClass ? options.customClass.join(' ') : ''
})
const getPropName = () => {
  const { options } = props.field
  return options.name
}

</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.field-wrapper {
  position: relative;
}
.design-time-bottom-margin {
    margin-bottom: 5px;
  }
.el-form-item {
    //margin-bottom: 0 !important;
    //margin-bottom: 6px;

    //margin-top: 2px;
    position: relative;

    :deep(.el-form-item__label) {
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    // :deep(.el-form-item__content) {
      //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
    // }

    span.custom-label i {
      margin: 0 3px;
    }

    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input::-webkit-outer-spin-button,
    :deep(.hide-spin-button) input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
    }
}
.required :deep(.el-form-item__label)::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
.static-content-item {
  min-height: 20px;
  display: flex;  /* 垂直居中 */
  align-items: center;  /* 垂直居中 */

  :deep(.el-divider--horizontal) {
    margin: 15px;
  }
}
.el-form-item.selected, .static-content-item.selected {
  outline: 2px solid $--color-primary;
}
:deep(.label-left-align) .el-form-item__label {
  text-align: left;
  justify-content: flex-start !important;
}
:deep(.label-center-align) .el-form-item__label {
  text-align: center;
  justify-content: center !important;
}
:deep(.label-right-align) .el-form-item__label {
  text-align: right;
  justify-content: flex-end !important;
}
</style>
